/** 
 * 方法说明
 * author: GSCOSMOS
 * description: 侧边栏
 * @param {
	duration: 侧边栏弹出及消失速度
	width: 侧边栏宽度
	modelValue: 是否打开
	timingFunction: 侧边栏的加速度曲线函数
 }
 * @return {
	 close: 关闭侧边栏时的回调方法 
 }
 * @createTime: 2023-09-03 11:06:15
*/
<template>
	<view class="mask" 
	:class="{ show: modelValue }" 
	:style="{ transitionDuration: duration + 'ms', transitionTimingFunction: timingFunction }" 
	@click="close">
		<view class="popup" :style="{
			width: width,
			left: modelValue ? 0 : '-' + width,
			transitionDuration: duration + 'ms',
			transitionTimingFunction: timingFunction
		}">
			<slot></slot>
		</view>
	</view>
</template>


<script>
	
function debounce(fn,wait){
    let timerId = null;
    let flag = true;
	return function(){
		clearTimeout(timerId);
		if(flag){
			fn.apply(this,arguments);
			flag = false
		}
		timerId = setTimeout(() => { flag = true},wait)
      }
}
	
export default {
	data() {
		return {

		}
	},
	props:{
		modelValue:{
			type: Boolean,
			require: true,
		},
		duration:{
			type: Number,
			require: false,
			default: 500
		},
		width:{
			type: String,
			require: false,
			default: '70%'
		},
		timingFunction:{
			type: String,
			require: false,
			default: 'cubic-bezier(0.46, 0.46, 0.2, 0.99)'
		}
	},
	
	created() {
		this.closeDebounce = debounce(this.close, this.duration, {
		  'leading': true,	// 立即执行
		  'trailing': false	
		})
	},
	mounted() {
		
	},
	methods: {
		close(){
			this.$emit('update:modelValue', false)
			this.$emit('close')
		}
	}
}	
</script>
<!-- 
<script lang="ts" setup>
import { onMounted, ref, Ref } from "vue";

const masktModeClass:Ref<object> = ref(['fade'])
const contentModeClass:Ref<object> = ref(['slide-left'])
const refMask:Ref<HTMLElement | null> = ref(null)
const refContent:Ref<HTMLElement | null> = ref(null)

function debounce(fn,wait){
    let timerId = null;
    let flag = true;
	return function(){
		clearTimeout(timerId);
		if(flag){
			fn.apply(this,arguments);
			flag = false
		}
		timerId = setTimeout(() => { flag = true},wait)
      }
}

const props = withDefaults(
	defineProps<{
		modelValue: boolean,
		duration?: number,
		width?: string,
		timingFunction?: string,
	}>(), 
	{
		duration: 500,
		width: "70%",
		timingFunction: 'linear'
	},
);


const emits = defineEmits(['close','update:modelValue'])

onMounted(() => {
	refMask.value.init({
		duration: props.duration,
		timingFunction: 'ease-in-out'
	})
	refContent.value.init({
		duration: props.duration,
		timingFunction: props.timingFunction,
	})
})

// 点击遮罩关闭
const close = debounce(() => {
	// show.value = false
	
	refContent.value.step({
		translateX: '-' + props.width
	},{
		timingFunction: props.timingFunction,
	})
	refMask.value.step({
		opacity: 0
	})
	refMask.value.run(() => {})
	refContent.value.run(() => {
		emits('update:modelValue', false )
		emits('close')
	})
}, props.duration, {
  'leading': true,	// 立即执行
  'trailing': false	
})
</script> -->

<style scoped>
.content{
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 9999;
}
.popup{
	position: absolute;
	top: 0;
	left: -100%;
	background: white;
	height: 100%;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	overflow: scroll;
}
.mask{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: #00000000;
	z-index: 999;
	pointer-events: none;
	transition: 0.5s ease-in-out;
}

.mask.show{
	background: #00000099;
	pointer-events: all;
}

.show > .popup{
	left: 0;
}
</style>